<template>
  <div class="father">
    <h2>我是父组件，{{ name }}--{{ price }}</h2>
    <ChildTest></ChildTest>
  </div>
</template>

<script>
import { isProxy, isReactive, isReadonly, isRef, provide, reactive, toRefs } from "vue";
import ChildTest from "./child_test";

export default {
  name: 'Father',
  components: { ChildTest },
  setup() {
    let car = reactive({
      name: '奔驰',
      price: '50w',
    })

    // 响应式数据类型判断的api
    console.log(isRef(car));
    console.log(isReactive(car));
    console.log(isReadonly(car));
    console.log(isProxy(car));

    provide('car', car)   // 给自己后代组件传递数据

    return { ...toRefs(car) }
  }
}
</script>

<style>
.father {
  background-color: gray;
  padding: 10px;
}
</style>